<template>
  <div>
    <div class="topcontainer">
      <h4>已过滤字段</h4>
    </div>
    <el-table
      :data="tableFieldLst"
      class="table"
      height="calc(100vh - 270px)"
      :row-style="{height:'30px'}"
      :cell-style="{padding:'0px'}"
      style="width: 100%;font-size: 10px"
    >
      <el-table-column prop="tableName" label="表名称" align="center">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.isDefault">{{ scope.row.tableName }}</span>
            <el-select
              v-else
              placeholder
              v-model="scope.row.tableId"
              @change="changeforeignTableId"
            >
              <el-option
                v-for="item in searchList"
                :key="item.tableId"
                :label="item.tableName"
                :value="item.tableId"
              >{{ item.tableName }}</el-option>
            </el-select>
            <!-- searchList -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fieldName" label="字段名称" align="center">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.isDefault">{{ scope.row.fieldName }}</span>
            <el-select
              v-else
              placeholder
              v-model="scope.row.fieldId"
              :disabled="!scope.row.tableId"
              @change="changeField($event, scope.$index)"
            >
              <el-option
                v-for="item in foreignFieldList"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId"
              >{{ item.fieldName }}</el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
       <el-table-column prop="showInfo" label="展示类型" align="center">
        <template slot-scope="scope">
          <div>
            <el-select
              placeholder
              v-model="scope.row.showInfo"
              :disabled="!scope.row.ischek"
              @change="changeShow($event, scope.$index)"
            >
              <el-option
                v-for="item in showlist"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >{{ item.name }}</el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="fieldId"
        label="字段名称id"
        align="center"
      ></el-table-column>-->
      <el-table-column prop="seqNo" label="顺序号" align="center"></el-table-column>
      <el-table-column prop="operatorType" label="过滤类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isDefault">
            {{
            scope.row.operatorType | capitalize
            }}
          </span>
          <el-select
            v-else
            placeholder
            v-model="scope.row.operatorType"
            @change="changeType($event, scope.$index)"
          >
            <el-option
              v-for="line in options"
              :key="line.value"
              :label="line.label"
              :value="line.value"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="tableId" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="delTable(scope)" type="text" v-if="scope.row.isDefault">删除</el-button>
          <el-button @click="cancleJoin" type="text" v-else>取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="btn">
      <el-button type="primary" @click="addJoin" size="mini">添加关联</el-button>
      <el-button type="primary" @click="submitJoin" v-if="isAdd" size="mini">确定</el-button>
      <!-- <el-button type="primary" @click="cancleJoin" v-if="isAdd" size="mini"
        >取消</el-button
      >-->
    </div>
  </div>
</template>
<script>
import { api } from "../server/api";
export default {
  data() {
    return {
      operatorType: 0,
      tableId: "",
      tableFieldLst: [],
      foreignFieldList: [],
      dialogVisible: false,
      searchList: [],
      tableData: [],
      allData: [],
      multipleSelection: [],
      allSelect: {},
      mainFieldId: "",
      queryParams: {
        tableId: ""
      },
      showlist:[{name:'搜索框',value:'1'},{name:'标签',value:'0'}],
      //   0-IS NULL；1-IS NOT NULL；2-=；3-<；4-<=；5->；6->=；7-LIKE；8-IN；9-NOT IN；
      options: [
        {
          value: 0,
          label: "IS NULL"
        },
        {
          value: 1,
          label: "IS NOT NULL"
        },
        {
          value: 2,
          label: "="
        },
        {
          value: 3,
          label: "<"
        },
        {
          value: 4,
          label: "<="
        },
        {
          value: 5,
          label: ">"
        },
        {
          value: 6,
          label: ">="
        },
        {
          value: 7,
          label: "LIKE"
        },
        {
          value: 8,
          label: "IN"
        },
        {
          value: 9,
          label: "NOT IN"
        }
      ],
      isAdd: false
    };
  },
  created() {
    this.tableId = this.$route.query.tableId;
    this.getDatils();
    this.getsearchList();
  },
  filters: {
    capitalize: function(value) {
      let list = [
        { lable: "IS NULL", type: 0 },
        { lable: "IS NOT NULL", type: 1 },
        { lable: "=", type: 2 },
        { lable: "<", type: 3 },
        { lable: "<=", type: 4 },
        { lable: ">", type: 5 },
        { lable: ">=", type: 6 },
        { lable: "LIKE", type: 7 },
        { lable: "IN", type: 8 },
        { lable: "NOT IN", type: 9 }
      ];
      let findvalue = list.find(val => {
        return val.type === value;
      });
      return findvalue.lable;
    },
     shoname: function(value) {
       console.log(value)
      let list = [
       {name:'搜索框',value:1},{name:'标签',value:0}
      ];
      let findvalue = list.find(val => {
        return val.value ===parseInt(value) ;
      });
      return findvalue.name;
    }
  },

  methods: {
    getDatils() {
      api.stdappTableFilterLst(this.tableId).then(res => {
        res.map(item => {
          item.isDefault = true;
        });

        this.tableFieldLst = res;
      });
    },
    //获取除了当前表其他表的list
    getsearchList() {
      api.stdappTableJoinLst(this.tableId).then(res => {
        this.searchList = [
          { tableId: this.tableId, tableName: this.$route.query.name }
        ];
        let obj = {};
        res.map(item => {
          obj = {
            tableId: item.foreignTableId,
            tableName: item.foreignTableName
          };
          this.searchList.push(obj);
        });
      });
    },
    //新增关联
    addJoin() {
      this.tableFieldLst.push({ isDefault: false, operatorType: 0, showInfo:'1'});
      this.isAdd = true;
    },
    submitJoin() {
      for (let index = 0; index < this.tableFieldLst.length; index++) {
        const element = this.tableFieldLst[index];
        const { tableId, fieldId, seqNo, operatorType } = element;
        console.log(tableId, fieldId, seqNo);
        if (!tableId || !fieldId || !seqNo) {
          this.$message.warning("请选择");
          return;
        }
      }
      this.submit();
    },
    cancleJoin() {
      // this.isAdd = false;
      this.tableFieldLst.pop();

      if (this.tableFieldLst.length == 0) {
        this.isAdd = false;
      }
    },
    delTable(scope) {
      console.log(scope.$index);
      this.tableFieldLst.splice(scope.$index, 1);
      this.submit();
    },
    changeforeignTableId(e) {
      console.log(e);
      this.foreignFieldList = [];
      this.getForeignFieldList(e);
    },
    getForeignFieldList(e) {
      api.stdappTableDetail({ tableId: e }).then(res => {
        console.log(res);
        let { fieldLst } = res;
        let arr = fieldLst.filter(item => {
          return (
            item.fieldType == "InputNumber" ||
            item.fieldType == "InputText" ||
            item.fieldType == "InputDate" ||
            item.fieldType == "IdentityKey" ||
            item.fieldType == "RadioBox" ||
            item.fieldType == "Checkbox" ||
            item.fieldType == "SelectRadio" ||
            item.fieldType == "SelectCheck"
          );
        });
        console.log()
        arr.forEach(element => {
          if(element.fieldType==='RadioBox'||element.fieldType==='SelectRadio'){
            element.ischek=true
          }else{
             element.ischek=false
          }
          
        })
        console.log(arr);
        this.foreignFieldList = arr;
      });
    },
    changeField(e, index) {
      console.log(e);
      let data = this.foreignFieldList.find(item => {
        return item.fieldId == e;
      });
      this.$set(this.tableFieldLst[index], "seqNo", data.seqNo);
       this.$set(this.tableFieldLst[index], "ischek", data.ischek);
      console.log(this.tableFieldLst);
    },
    changeShow(e,index){
 console.log(index);
      this.$set(this.tableFieldLst[index], "showInfo", e);
      console.log(this.tableFieldLst);
    },
    changeType(e, index) {
      console.log(index);
      this.$set(this.tableFieldLst[index], "operatorType", e);
      console.log(this.tableFieldLst);
    },
    submit() {
      let arr = [];
      for (let index = 0; index < this.tableFieldLst.length; index++) {
        const element = this.tableFieldLst[index];
        const { tableId, fieldId, seqNo, operatorType,showInfo } = element;
        const obj = { tableId, fieldId, seqNo, operatorType ,useType:0,showInfo};
        if (tableId && fieldId && seqNo) {
          arr.push(obj);
        }
      }
      const findval=JSON.parse(JSON.stringify(arr)).filter(val=>{
        return val.showInfo==='0'
      })
      if(findval.length>1){
         this.$message.error('标签类型最多一个');
        return
      }
      console.log(arr)
      const data = {
        tableId: this.tableId,
        pairLst: arr
      };
      console.log(data);
      api.stdappTableSetFilter(data).then(res => {
        console.log(res);
        this.$message.success("过滤成功");
        this.dialogVisible = false;
        this.joinTableData = [];
        this.multipleSelection = [];
        this.isAdd = false;
        this.getDatils();
      });
    }
    // handleSelectionChange(row) {
    //   const { tableId } = this.queryParams;
    //   this.multipleSelection = row;
    //   this.$nextTick(() => {
    //     this.$set(this.allSelect, tableId, row);
    //   });
    // },

    // resetQuery() {
    //   this.queryParams = {
    //     tableId: "",
    //   };
    // },
    // joinViceTable() {
    //   this.tableData = [];
    //   this.dialogVisible = true;
    //   this.getsearchList();
    //   console.log("lll");
    // },
    // getsearchList() {
    //   api.stdappTbls4Join().then((res) => {
    //     this.searchList = res.filter((item) => {
    //       return item.tableId != this.tableId;
    //     });
    //     this.$set(this.queryParams, "tableId", this.searchList[0].tableId);
    //     // this.getFieldList();
    //   });
    // },
    // // getFieldList() {
    // //   api.stdappTableDetail(this.queryParams).then((res) => {
    // //     let { fieldLst } = res;
    // //     this.tableData = fieldLst;
    // //     let data = this.allSelect[this.queryParams.tableId];
    // //     setTimeout(() => {
    // //       if (data) {
    // //         for (let index = 0; index < data.length; index++) {
    // //           const element = data[index];
    // //           const val = fieldLst.find((item) => {
    // //             return item.fieldId == element.fieldId;
    // //           });
    // //           this.$refs.multipleTable.toggleRowSelection(val, true);
    // //         }
    // //       } else {
    // //         this.$refs.multipleTable.clearSelection();
    // //       }
    // //     }, 100);
    // //   });
    // // },

    // submitJoin() {
    //   const arr = [];
    //   //  {"mainFieldId":45, "foreignTableId":8, "foreignFieldId":46},
    //   for (let key in this.allSelect) {
    //     console.log(this.allSelect[key]);
    //     const fieldLst = this.allSelect[key];
    //     for (let index = 0; index < fieldLst.length; index++) {
    //       const element = fieldLst[index];
    //       const obj = {
    //         seqNo: element.seqNo,
    //         tableId: key,
    //         fieldId: element.fieldId,
    //         operatorType: this.operatorType,
    //       };
    //       arr.push(obj);
    //     }
    //   }
    //   console.log(arr);
    //   const data = {
    //     tableId: this.tableId,
    //     pairLst: arr,
    //   };
    //   api.stdappTableSetFilter(data).then((res) => {
    //     console.log(res);
    //     this.$message.success("过滤成功");
    //     this.dialogVisible = false;
    //     this.joinTableData = [];
    //     this.multipleSelection = [];
    //     this.getDatils();
    //   });
    // },
  }
};
</script>
<style lang="scss" scoped>
.topcontainer {
  display: flex;
  height: 60px;
  align-items: center;
  h4 {
    margin: 0 10px;
  }
}
.list {
  .title {
    display: inline-block;
    padding: 5px 0;
  }
  .el-tag {
    margin: 5px;
  }
}

.btn {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: center;
  height: 50px;
  .el-button {
    height: 32px;
  }
}
</style>